<template>
  <el-form :inline="true" :model="Form" class="demo-form-inline">
    <el-row>
      <el-col :span="19">
        <el-form-item
          v-for="(item, index) in FormLabel"
          v-show="formItemFn(item, index)"
          :key="index"
          :label="item.label"
          :style="{ 'min-width': `${item.minWidth}'!important'` }"
          class="form"
        >
          <!-- 输入框 -->
          <el-input
            v-if="!item.type || item.type === 'input'"
            v-model="Form[item.name]"
            :disabled="item.disabled"
            clearable
            placeholder="请输入"
          />
          <!-- 下拉选框 -->
          <el-select v-if="item.type === 'select'" v-model="Form[item.name]" clearable>
            <el-option
              v-for="(item1, index) in item.client"
              :key="item1.value"
              :label="item1.label"
              :value="item1.value"
              filterable
            />
          </el-select>
          <!-- 客户 -->
          <el-select
            v-if="item.type === 'customer'"
            v-model="Form[item.name]"
            filterable
            placeholder="请输入客户名称"
            clearable
          >
            <el-option
              v-for="item in customerList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select
              v-if="item.type === 'activityType'"
              v-model="Form[item.name]"
              filterable
              placeholder="请输入活动类型"
              clearable
          >
            <el-option
                v-for="item in activityTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
          <!-- 日期选框 -->
          <el-date-picker
            v-else-if="item.type == 'picker'"
            v-model="Form[item.name]"
            format="YYYY-MM-DD"
            placeholder="请输入日期"
            type="date"
            value-format="YYYY-MM-DD"
          />
          <!-- 开始到结束 -->
          <el-date-picker
            v-else-if="item.type == 'datetimerange'"
            v-model="Form[item.name]"
            :default-time="defaultTime"
            date-format="YYYY/MM/DD HH:mm:ss"
            end-placeholder="结束"
            format="YYYY-MM-DD"
            start-placeholder="开始"
            time-format="HH:mm"
            type="datetimerange"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
           
          <!-- 青工委组织下拉 -->
          <el-tree-select
            v-else-if="item.type == 'weixiao'"
            v-model="Form[item.name]"
            :data="weixiaoData"
            :props="{ value: 'id', label: 'label', children: 'children' }"
            check-strictly
            placeholder="请选择所属组织"
            value-key="id"
          />
          <!-- 部门 -->
          <el-tree-select
            v-else-if="item.type == 'department'"
            v-model="Form[item.name]"
            :data="deptOptions"
            :props="{ value: 'id', label: 'label', children: 'children' }"
            check-strictly
            placeholder="请选择归属部门"
            value-key="id"
          />
          <!-- 财务审批列表的 部门 -->
          <el-tree-select
            v-else-if="item.type == 'approvalDept'"
            v-model="Form[item.name]"
            :data="deptOptions"
            :props="{ value: 'id', label: 'label', children: 'children' }"
            check-strictly
            placeholder="请选择归属部门"
            value-key="id"
          />
          <!-- 凭证 -->
          <el-tree-select
            v-else-if="item.type == 'voucherStatusItem'"
            v-model="Form[item.name]"
            :data="voucherOptions"
            :props="{ value: 'id', label: 'label', children: 'children' }"
            check-strictly
            placeholder="请选择凭证状态"
            value-key="id"
          />
        </el-form-item>
      </el-col>

      <el-col :span="5">
        <div class="right-option">
          <div v-if="FormLabel.length > 4" class="custom-icon" @click="isOpen = !isOpen">
            <span> {{ isOpen ? '收起' : '展开' }}</span>
            <el-icon v-show="isOpen">
              <ArrowUpBold />
            </el-icon>
            <el-icon v-show="!isOpen">
              <ArrowDownBold />
            </el-icon>
          </div>
          <div class="btn">
            <el-button
              class="createBtn3"
              icon="Refresh"
              @click.stop.prevent="onReset(Form)"
              >重置
            </el-button>
            <el-button
              class="createBtn2"
              icon="Search"
              
              @click.stop.prevent="onSubmit(Form)"
              >查询
            </el-button>
            
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row v-show="isOpen">
      <el-col :span="19">
        <el-form-item
          v-for="(item, index) in FormLabel"
          v-show="
            (FormLabel.some((item) => item.type === 'datetimerange') && index >= 3) ||
            (!FormLabel.some((item) => item.type === 'datetimerange') && index >= 4)
          "
          :key="index"
          :label="item.label"
        >
          <!-- 输入框 -->
          <el-input
            v-if="!item.type || item.type == 'input'"
            v-model="Form[item.name]"
            :disabled="item.disabled"
            clearable
            placeholder="请输入"
          />
          <!-- 下拉选框 -->
          <el-select v-if="item.type == 'select'" v-model="Form[item.name]" clearable>
            <el-option
              v-for="(item1, index) in item.client"
              :key="item1.value"
              :label="item1.label"
              :value="item1.value"
              filterable
            />
          </el-select>
          <!-- 客户 -->
          <el-select
            v-if="item.type == 'customer'"
            v-model="Form[item.name]"
            filterable
            placeholder="请输入客户名称"
            clearable
          >
            <el-option
              v-for="item in customerList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <!-- 日期选框 -->
          <el-date-picker
            v-else-if="item.type == 'picker'"
            v-model="Form[item.name]"
            format="YYYY-MM-DD"
            placeholder="请输入日期"
            type="date"
            value-format="YYYY-MM-DD"
          />
          <!-- 开始到结束 -->
          <el-date-picker
            v-else-if="item.type == 'datetimerange'"
            v-model="Form[item.name]"
            :default-time="defaultTime"
            date-format="YYYY/MM/DD HH:mm:ss"
            end-placeholder="结束"
            format="YYYY-MM-DD HH:mm:ss"
            start-placeholder="开始"
            time-format="HH:mm"
            type="datetimerange"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
          <!-- 青工委组织下拉 -->
          <el-tree-select
            v-else-if="item.type == 'weixiao'"
            v-model="Form[item.name]"
            :data="weixiaoData"
            :props="{ value: 'id', label: 'label', children: 'children' }"
            check-strictly
            placeholder="请选择所属组织"
            value-key="id"
          />
          <!-- 部门 -->
          <el-tree-select
            v-else-if="item.type == 'department'"
            v-model="Form[item.name]"
            :data="deptOptions"
            :props="{ value: 'id', label: 'label', children: 'children' }"
            check-strictly
            placeholder="请选择归属部门"
            value-key="id"
          />
          <!-- 凭证 -->
          <el-tree-select
            v-else-if="item.type == 'voucherStatusItem'"
            v-model="Form[item.name]"
            :data="voucherOptions"
            :props="{ value: 'id', label: 'label', children: 'children' }"
            check-strictly
            placeholder="请选择凭证状态"
            value-key="id"
          />
          <!-- 完工状态 -->
          <el-tree-select
            v-else-if="item.type == 'successStatusItem'"
            v-model="Form[item.name]"
            :data="wangongOptions"
            :props="{ value: 'id', label: 'label', children: 'children' }"
            check-strictly
            placeholder="请选择完工状态"
            value-key="id"
          />
          <!-- 开票状态 -->
          <el-tree-select
            v-else-if="item.type == 'billingStatusItem'"
            v-model="Form[item.name]"
            :data="kaipiaoOptions"
            :props="{ value: 'id', label: 'label', children: 'children' }"
            check-strictly
            placeholder="请选择开票状态"
            value-key="id"
          />
          <!-- 审批状态 -->
          <el-tree-select
            v-else-if="item.type == 'approvalStatus'"
            v-model="Form[item.name]"
            :data="approvalOptions"
            :props="{ value: 'id', label: 'label', children: 'children' }"
            check-strictly
            placeholder="请选择审批状态"
            value-key="id"
          />
          <!-- 审批类别 -->
          <el-tree-select
            v-else-if="item.type == 'approvalType'"
            v-model="Form[item.name]"
            :data="approvalTypeOptions"
            :props="{ value: 'id', label: 'label', children: 'children' }"
            check-strictly
            placeholder="请选择审批类别"
            value-key="id"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script setup>
import { defineEmits, defineProps, ref,onMounted } from 'vue'
import { deptTreeSelect } from '@/api/system/user'
import {activityCategoryApi} from "../../api/system/activity";
// import { apiDataStore } from '@/store/modules/apiData'
// import { getWorkApi } from '@/api/tickets'

const isOpen = ref(true)
// 判断里面是否有datetimerange有就显示3没有显示4
let flagfalse = ref(true)
const formItemFn = (v, i) => {
  if (flagfalse.value) {
    if (v.type === 'datetimerange') {
      flagfalse.value = false
      return i < 3
    } else {
      return i < 4
    }
  } else {
    return i < 3
  }
}
const voucherOptions = ref([
  {
    id: '未生成',
    label: '未生成',
  },
  {
    id: '已生成',
    label: '已生成',
  },
])
const wangongOptions = ref([
  {
    id: '未完工',
    label: '未完工',
  },
  {
    id: '已完工',
    label: '已完工',
  },
])
const kaipiaoOptions = ref([
  {
    id: '未开票',
    label: '未开票',
  },
  {
    id: '已开票',
    label: '已开票',
  },
])

// 财务审批类别
const approvalTypeOptions = ref([
  {
    id: '经营性付款申请',
    label: '经营性付款申请',
  },
  {
    id: '非经营性付款申请',
    label: '非经营性付款申请',
  },
  {
    id: '备用金申请',
    label: '备用金申请',
  },
  {
    id: '文旅运营申请',
    label: '文旅运营申请',
  },
  {
    id: '业务招待报备申请',
    label: '业务招待报备申请',
  },
  {
    id: '采购申请',
    label: '采购申请',
  },
  {
    id: '货品抵账申请',
    label: '货品抵账申请',
  },
  {
    id: '项目资金众筹申请',
    label: '项目资金众筹申请',
  },
])

// 审批状态
const approvalOptions = ref([
  {
    id: '审核中',
    label: '审核中',
  },
  {
    id: '已通过',
    label: '已通过',
  },
  {
    id: '已驳回',
    label: '已驳回',
  },
])
// const apiStore = apiDataStore()
let emit = defineEmits(['onSearch'])
const props = defineProps({
  Form: {
    type: Object,
    default: {},
  },
  FormLabel: {
    type: Array,
    default: [],
  },
  saleClient: {
    type: Object,
  },
  dateSelect: {
    type: Object,
  },
})

const defaultTime = ref([new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)])
// 查找
const onSubmit = (v) => {
  console.log(v, '----')

  emit('onSearch', v)
}
// 重置
const onReset = (v) => {
  // 重置传入固定的表单数据
  for (const key in v) {
    v[key] = ''
  }
  console.log(v, '----')
  emit('onSearch', v)
}

let customerList = reactive([])
let activityTypeList = reactive([]) // 活动类型

// 获取活动分类
const activityTypeListFn =async ()=>{
  let { code, rows } = await activityCategoryApi()
  if (code == 200) {
    console.log(rows,'datadata')
    rows.forEach((v) => {
      activityTypeList.push({
        label: v.name,
        value: v.id,
      })
    })
  }
}

// 获取客户下拉菜单数据
const getWorkApiData = async (v = '') => {
  if (apiStore.customerList.length > 0) {
    customerList = apiStore.customerList
  } else {
    let params = { customerName: v }
    let { code, data } = await getWorkApi(params)
    if (code == 200) {
      data.forEach((v) => {
        apiStore.customerList.push({
          label: v.primaryClassification + '/' + v.customerName,
          value: v.customerId,
        })
      })
      customerList = apiStore.customerList
    }
  }
}
const deptOptions = ref(undefined)
/*查询部门下拉树结构 */
// const getDeptTree = () => {
//   if (apiStore.deptApiData.length > 0) {
//     deptOptions.value = apiStore.deptApiData
//   } else {
//     deptTreeSelect().then((response) => {
//       apiStore.deptApiData = response.data
//       deptOptions.value = apiStore.deptApiData
//     })
//   }
// }
// 财务审批列表 部门 获取最内层数据
const getLeafNodes = (nodes) => {
  let leaves = []
  nodes.forEach((node) => {
    if (!node.children || node.children.length === 0) {
      leaves.push({ id: node.id, label: node.label })
    } else {
      leaves = leaves.concat(getLeafNodes(node.children))
    }
  })
  return leaves
}


const weixiaoData = ref(undefined)
/*查询青工委下拉树结构 */
function getDeptTree() {
  deptTreeSelect().then(response => {
    weixiaoData.value = response.data;
  });
};

onMounted(() => {
  Promise.all([getDeptTree(),activityTypeListFn()])
})
</script>
<style lang="scss" scoped>
.right-option {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.el-input__inner {
  align-items: center;
}

.el-collapse {
  --el-collapse-border-color: transparent !important;
}

//默认图标不显示
:deep(.el-collapse-item__arrow) {
  display: none !important;
}

:deep(.el-form-item__content) {
  padding-left: 0;
}

:deep(.el-form-item__label) {
  //min-width: 87px;
  margin-left: 20px;
}


/* 第一个 label 的 margin-left 为 0 */
:deep(.el-form-item:first-child .el-form-item__label) {
  margin-left: 0;
}
:deep(.el-collapse-item__header) {
  width: 100vw;
}

.demo-form-inline {
  width: 100%;
  border-bottom:2px solid #f2f3f5;
  margin-bottom: 16px;
  :deep(.el-form-item) {
    margin-right: 0px !important;
  }

  .btn {
    display: flex;
    align-items: center;
  }

  .custom-icon {
    color: #999;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 13px;

    .el-icon {
      margin-left: 5px;
    }
  }

  :deep(.el-date-editor) {
    width: 100%;
  }

  :deep(.el-form-item:has(.el-date-editor)) {
    width: 48%;
  }

  :deep(.el-form-item:has(.el-input__inner)) {
    width: 24%;

    .el-select {
      width: 100%;
    }
  }

  :deep(.el-form-item__label) {
    font-size: 14px;
  }

  :deep(.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th) {
    font-size: 15px !important;
  }

  .reset {
    background-color: #fff;
    color: #333;
  }

  .btn {
    // margin-left: 32px;
  }
}
:deep(.el-select .el-input) {
  // width: 184px;
}
</style>
